import { history, useLocation } from "umi";
import { useRef, useState } from "react";
import { StyledAgree, StyledCancel } from "@/components/button";
import { ProForm, ProFormCheckbox } from "@ant-design/pro-components";
import FileUpload from "@/assets/image/patterns/File Upload.png";
import {
  Card,
  Divider,
  Form,
  message,
  Space,
  Descriptions,
  Upload,
} from "antd";
import LGV from "@/assets/image/icons/LGV.svg";
import Motorcycle from "@/assets/image/icons/Motorcycle.svg";
import privatecar from "@/assets/image/icons/privatecar.svg";
import { PaddingContent, ContentBorder } from "@/components/page-padding";
import { CustomTitle } from "@/components/customTitle";
import SubmissionCheckbox from "@/components/lpn-submission-checkbox";
import "./index.less";
import AlertFill from "@/assets/image/icons/alert-fill.svg";
import CustomModal from "@/components/customModal";
const EditMyLPN = () => {
  const [form] = Form.useForm();
  const formRef = useRef(form);
  const location = useLocation();

  // 获取查询参数对象
  const queryParams = new URLSearchParams(location.search);
  console.log(queryParams, "Form values queryParams");

  // 获取参数 vehicleType 的值
  const valueOfVehicleType = queryParams.get("vehicleType");
  console.log("Form values valueOfVehicleType=", valueOfVehicleType);
  // 控制模态框的显示状态
  const [isModalOpenCfmSubmit, setIsModalOpenCfmSubmit] = useState(false);
  const onFinish = async (values: any) => {
    console.log("Form values=====", values);
    setIsModalOpenCfmSubmit(true);

    // 处理提交逻辑
  };
  //错误验证拦截
  const onFinishFailed = () => {
    message.error({ content: "please check required field" });
    const firstInvalidField = document.querySelector(
      ".ant-form-item-has-error"
    );
    if (firstInvalidField) {
      firstInvalidField.scrollIntoView({ behavior: "smooth" });
    }
  };

  const handleOkCfmSubmit = () => {
    history.push("/myRegistered-lpn/success");
  };

  const handleCancelCfmSubmit = () => {
    setIsModalOpenCfmSubmit(false);
  };

  return (
    <>
      <PaddingContent>
        <CustomTitle>Edit My License Plate Number</CustomTitle>
        <ContentBorder className="confirm-edit-lpn">
          <div className="top-text">Please confirm your information</div>
          <div className="middle-text">
            Each type of vehicle can only be registered once.
          </div>
          <ProForm
            initialValues={{}}
            form={form}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            submitter={{
              render: () => (
                <div style={{ textAlign: "center" }}>
                  <Space size={"large"}>
                    <StyledCancel
                      type="default"
                      //onClick={() => formRef.current?.resetFields()}
                      // onClick={handleCancelBtn}
                      className="footer-button"
                    >
                      Cancel
                    </StyledCancel>
                    <StyledAgree
                      onClick={() => formRef.current?.submit()}
                      className="footer-button"
                      type="default"
                    >
                      Submit
                    </StyledAgree>
                  </Space>
                </div>
              ),
            }}
          >
            <Card>
              {valueOfVehicleType === "PRIVATECAR" && (
                <img src={privatecar} alt="SVGVehType" />
              )}
              {valueOfVehicleType === "Motorcycle" && (
                <img src={Motorcycle} alt="SVGVehType" />
              )}
              {valueOfVehicleType === "Light Goods Vehicle" && (
                <img src={LGV} alt="SVGVehType" />
              )}
              <span className="vehType">Motorcycle</span>
              <div className="content">
                <Descriptions layout="vertical">
                  <Descriptions.Item label="License Plate Number">
                    XC5689
                  </Descriptions.Item>
                  <Descriptions.Item label="Octopus No.">
                    1810000000
                  </Descriptions.Item>
                </Descriptions>
                <div className="vehDoc">Vehicle Registration Document</div>
                <Upload
                  className="upload-item"
                  showUploadList={{
                    showRemoveIcon: false,
                  }}
                  action=""
                  listType="picture"
                  defaultFileList={[
                    {
                      uid: "-1",
                      name: "LPN.png",
                      size: 102422334,
                      status: "done",
                      //url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                      thumbUrl: FileUpload,
                      //   "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                    },
                  ]}
                />
                <ProFormCheckbox
                  fieldProps={{
                    checked: true,
                  }}
                  disabled
                >
                  I have DPP Permit.
                </ProFormCheckbox>
                <Upload
                  className="upload-item"
                  showUploadList={{
                    showRemoveIcon: false,
                  }}
                  action=""
                  listType="picture"
                  defaultFileList={[
                    {
                      uid: "-1",
                      name: "DPP.jpg",
                      size: 102422334,
                      status: "done",
                      //url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                      thumbUrl: FileUpload,
                      //   "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                    },
                  ]}
                />

                <div className="dpp-permit-info-container">
                  <div className="dpp-permit-info-title">
                    DPP Permit Information (Extracted from Image Uploaded)
                  </div>
                  <Descriptions layout="vertical">
                    <Descriptions.Item label="Registration Marks">
                      1231231231
                    </Descriptions.Item>
                    <Descriptions.Item label="Date of Expired">
                      1/10/2026
                    </Descriptions.Item>
                  </Descriptions>
                </div>

                <ProFormCheckbox
                  fieldProps={{
                    checked: true,
                  }}
                  disabled
                >
                  I am not the vehicle owner.
                </ProFormCheckbox>
                {/* <StyledAlertCircle /> */}
                <Upload
                  className="upload-item"
                  showUploadList={{
                    showRemoveIcon: false,
                  }}
                  action=""
                  listType="picture"
                  defaultFileList={[
                    {
                      uid: "-1",
                      name: "Authorization Letter.pdf",
                      size: 102422334,
                      status: "done",
                      //url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                      thumbUrl: FileUpload,
                      //   "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                    },
                  ]}
                />
              </div>
            </Card>

            <Divider plain></Divider>

            <SubmissionCheckbox
              form={form}
              checkGroupName="confirmCheckGroup"
            />
          </ProForm>
        </ContentBorder>
      </PaddingContent>

      <CustomModal
        width="40%"
        icon={AlertFill}
        title="Confirm to Submit?"
        content=""
        onOk={handleOkCfmSubmit}
        onCancel={handleCancelCfmSubmit}
        isModalOpen={isModalOpenCfmSubmit}
        btnLeftText="Cancel"
        btnRightText="Confirm"
      />
    </>
  );
};

export default EditMyLPN;
